<template>
	<view class="content">
		<SideEdge :Dataindex='2'></SideEdge>
		<view class="right">
			<search></search>
			<view class="switchBox">
				<view class="item" @click="onclick('1')">
					<image src="https://img.wilmer.com.cn/admin/2024/4-29/%E7%AB%A0%E8%8A%82%402x.png" mode=""></image>
					<text>章节测试</text>
				</view>
				<view class="item" @click="onStage()">
					<image src="https://img.wilmer.com.cn/admin/2024/4-29/%E9%98%B6%E6%AE%B5%402x.png" mode=""></image>
					<text>阶段测试</text>
				</view>
				<view class="item" @click="onSimulation()">
					<image src="https://img.wilmer.com.cn/admin/2024/4-29/%E6%A8%A1%E6%8B%9F%402x.png" mode=""></image>
					<text>模拟练习</text>
				</view>
			</view>
			<!-- <view class="btnBox">
				<view class="btn">历史测试</view>
				<view class="btn">成才报告</view>
			</view> -->
		</view>
	</view>
</template>

<script setup>
	import {
		Question,
		chapterList
	} from '@/common/api/subject.js'
	import {
		getCurrentInstance
	} from "vue";
	const {
		proxy
	} = getCurrentInstance();


	function onclick(val) {
		chapterList({
			subject_id: proxy.$page.options.subject_id
		}).then(res => {
			if (res.data.length == 0) {
				uni.showToast({
					title: "暂无章节测试",
					icon: 'none'
				});
			} else {
				uni.navigateTo({
					url: `/pages/index/chapter?class=${val}&subject_id=${proxy.$page.options.subject_id}`
				})
			}
		})

	}

	function onSimulation() {
		uni.showToast({
			title: "暂无模拟练习",
			icon: 'none'
		});
	}

	function onStage() {
		Question({
			subject_id: proxy.$page.options.subject_id,
			class: 2
		}).then(res => {
			if (res.code == 1 && res.data.length > 0) {
				uni.navigateTo({
					url: `/pages/index/stage?subject_id=${proxy.$page.options.subject_id}`
				})
			} else {
				uni.showToast({
					title: "暂无阶段测试",
					icon: 'none'
				});
				return false
			}
		})
	}
</script>

<style>
	page {
		width: 100%;
		height: auto;
		background: #F7F7F7;
		overflow-x: hidden;
	}
</style>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		position: relative;
	}

	.content .right {
		width: calc(100vw - 300px);
		height: 100vh;
		overflow: overlay;

		.switchBox {
			display: flex;
			align-items: center;
			justify-content: space-around;

			.item {
				width: 450 * 0.8px;
				height: 754 * 0.8px;
				background: #FFFFFF;
				box-shadow: 0px 6px 58px 0px rgba(124, 124, 124, 0.1);
				border-radius: 20px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 310px;
					height: 310px;
				}

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 60px;
					color: #040404;
					line-height: 60px;
				}
			}
		}

		.btnBox {
			margin-top: 80px;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn {
				width: 200px;
				height: 68px;
				background: #040404;
				border-radius: 12px;

				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 24px;
				color: #FFFFFF;
				line-height: 26px;

				display: flex;
				align-items: center;
				justify-content: center;
			}

			.btn:nth-child(2) {
				border: 1px solid #040404;
				color: #040404;
				background: transparent;
				margin-left: 60px;
			}
		}
	}
</style>